<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/jquery.min.js"></script>
    <script src="../org/angular.min.js"></script>
</head>
<body>

<div ng-app="hd">
    <div ng-controller="ctrl">
    {{name1}}<button ng-click="callback()">angular事件</button><hr>
    {{name2}}<button id="bt">juery事件</button>

    </div>

</div>


<script>

    var m = angular.module('hd', []);
    m.controller('ctrl', ['$scope', function ($scope) {
        $scope.name1 = '后盾人1';
        $scope.name2 = '后盾人2';


        $scope.callback = function () {  //执行angluar函数后，angluar会更新一遍控制器内的数据
          $scope.name1 = 'houdunren1.com';
        };

        $('#bt').click(function () {     //执行juery等非angluar的事件，angluar则不会更新，需要执行$scope.$apply()进行更新。
            $scope.name2 = 'houdunren2.com';
            $scope.$apply();
        });

    }]);

</script>

</body>
</html>

